<template>
	<view class="content">
		<view><image class="hot-logo" src="../../static/image/dost.png" mode="aspectFit"></image></view>

		<view class="hot-header-content">
			<view class="hot-header-left">
				<view class="line"></view>
				<text class="hot-header-title">基本信息</text>
			</view>
			<image class="hot-header-content-share" src="../../static/image/Frameas (2).png"></image>
		</view>
		<view class="hot-info_list">
			<text class="hot-info_name">地&emsp;&emsp;区</text>
			<text class="hot-info_value">芙蓉区</text>
			<text class="hot-info_name">楼盘名称</text>
			<text class="hot-info_value">融圣国际</text>
			<text class="hot-info_name">户&emsp;&emsp;型</text>
			<text class="hot-info_value">150m²</text>
		</view>
		<view class="hot-header-content">
			<view class="hot-header-left">
				<view class="line"></view>
				<text class="hot-header-title">地理位置</text>
			</view>
		</view>
		<view class="map"><image class="map-image" src="../../static/image/zwsj.png" mode="aspectFit"></image></view>
		<view class="hot-header-content">
			<view class="hot-header-left">
				<view class="line"></view>
				<text class="hot-header-title">案例展示</text>
			</view>
		</view>
		<view class="example-list">
			<view class="example-item" @click="openHH()">
				<image  class="example-item-image" src="../../static/image/Mask group_1.png"></image>
				<view class="example-item-mark"><text class="example-item-size">30m²</text></view>
			</view>
			<view class="example-item">
				<image class="example-item-image" src="../../static/image/Mask group_2.png"></image>
				<view class="example-item-mark"><text class="example-item-size">80m²</text></view>
			</view>
			<view class="example-item">
				<image class="example-item-image" src="../../static/image/Mask group_1.png"></image>
				<view class="example-item-mark"><text class="example-item-size">30m²</text></view>
			</view>
			<view class="example-item">
				<image class="example-item-image" src="../../static/image/Mask group_2.png"></image>
				<view class="example-item-mark"><text class="example-item-size">80m²</text></view>
			</view>
		</view>
		<view><button class="hot-submit">确定预约</button></view>
	</view>
</template>

<script>
export default {
	name: 'hot',
	data() {
		return {
			title: ''
		};
	},
	onLoad() {},
	methods: {
		openHH(){
			uni.navigateTo({
				url:'/pages/hot/hot-zz'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hot-logo {
	height: 450rpx;
}
.hot-info_list {
	box-sizing: border-box;
	font-size: 28rpx;
	grid-row-gap: 20rpx;
	padding: 0rpx 40rpx;
	width: 100%;
	display: grid;
	grid-template-columns: 40% 1fr;
}
.hot-header-content {
	box-sizing: border-box;
	height: fit-content;
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 40rpx 40rpx 20rpx 40rpx;
}
.hot-header-left {
	height: 100%;
	display: flex;
	align-items: center;
}
.hot-header-title {
	font-family: PingFang SC, PingFang SC-Bold;
	color: #333333;
	font-size: 32rpx;
	font-weight: 700;
	margin-left: 20rpx;
}
.hot-header-content-share {
	width: 38rpx;
	height: 38rpx;
}
.line {
	width: 8rpx;
	height: 30rpx;
	background: #3d9c36;
}
.hot-info_name {
	font-family: PingFang SC, PingFang SC-Medium;
	color: #333333;
	font-size: 24rpx;
}
.hot-info_value {
	font-family: PingFang SC, PingFang SC-Bold;
	color: #333333;
	font-size: 24rpx;
	font-weight: bold;
}
.map {
	width: 100%;
}
.map-image {
	width: 100%;
	height: 406rpx;
}

.example-list {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 22rpx;
	padding: 0 40rpx;
	width: 100%;
}
.example-item {
	position: relative;
	border-radius: 16rpx;
	box-shadow: 0rpx 4rpx 2rpx rgba(0, 0, 0, 0.1);
}
.example-item-image {
	width: 100%;
	height: 200rpx;
}
.example-item-mark {
	position: absolute;
	width: 100%;
	height: 50rpx;
	background-color: white;
	bottom: 0;
	border-radius: 0 0 16rpx 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.example-item-size {
	font-family: PingFang SC, PingFang SC-Bold;
	font-size: 28rpx;
}
.example-item-size::before {
	content: '— ';
	color: #3d9c36;
}
.example-item-size::after {
	content: ' —';
	color: #3d9c36;
}
.hot-submit {
	position: relative;
	box-sizing: border-box;
	height: 80rpx;
	width: 328rpx;
	color: #fff;
	font-size: 32rpx;
	background-color: #3d9c36;
	margin: 80rpx;
}
</style>
